<template>
  <div>
    <el-card>
      <el-button type="primary" :icon="Plus" @click="changeAddShow" v-hasBtn="'addJob'"
        >添加职位</el-button
      >
    </el-card>
    <el-card style="margin-top: 10px">
      <el-table v-loading="loading" border :data="jobList">
        <el-table-column
          type="index"
          align="center"
          label="序号"
          width="80"
        ></el-table-column>
        <el-table-column
          align="center"
          label="职位名称"
          prop="jobName"
        ></el-table-column>
        <el-table-column
          align="center"
          label="职位描述"
          prop="jobContent"
        ></el-table-column>
        <el-table-column align="center" label="创建时间">
          <template #default="{ row }">
            {{ formatDate(row.CreateAt) }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="修改时间">
          <template #default="{ row }">
            {{ formatDate(row.UpdateAt) }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="操作" width="220">
          <template #default="{ row }">
            <el-button
              type="primary"
              size="small"
              :icon="Menu"
              title="分配菜单"
              @click="changeMenu(row._id)"
              v-hasBtn="'jobAndMenu'"
            ></el-button>
            <el-button
              type="primary"
              size="small"
              :icon="Setting"
              @click="changeBtn(row._id)"
              title="分配按钮"
              v-hasBtn="'jobAndBtn'"
            ></el-button>
            <el-button
              type="info"
              size="small"
              :icon="Edit"
              title="修改职位"
              @click="updateJob(row._id)"
              v-hasBtn="'updateJob'"
            ></el-button>

            <el-popconfirm
              :title="`你确定删除${row.jobName}这个职位吗?`"
              @confirm="deleteJob(row._id)"
            >
              <template #reference>
                <el-button
                  type="danger"
                  size="small"
                  :icon="Delete"
                  title="删除职位"
                  v-hasBtn="'deleteJob'"
                ></el-button>
              </template>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        class="page"
        v-model:current-page="pageNo"
        v-model:page-size="pageSize"
        :page-sizes="[5, 10, 20, 30, 40]"
        background
        layout="jumper,prev, pager, next,total, sizes"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </el-card>
    <AddJob
      v-model="addJobDialog"
      v-model:jobId="jobId"
      @getJobList="getJobList"
    ></AddJob>
    <el-drawer v-model="drawer" title="分配菜单权限">
      <div v-loading="loading2">
        <el-checkbox
          v-model="isAll"
          :indeterminate="isIndeterminate"
          @change="handleCheckAllChange"
        >
          全选
        </el-checkbox>
        <el-checkbox-group
          v-model="menuArr"
          @change="handleCheckedCitiesChange"
        >
          <el-checkbox
            v-for="city in menuList"
            :key="city._id"
            :label="city.menuName"
            :value="city._id"
          >
            {{ city.menuName }}
          </el-checkbox>
        </el-checkbox-group>
      </div>

      <template #footer>
        <el-button>取消</el-button>
        <el-button type="primary" @click="addSelectMenu">确定</el-button>
      </template>
    </el-drawer>
    <BtnAndJob
      v-model="drawer1"
      v-model:btnId="btnId"
      @getJobList="getJobList"
    ></BtnAndJob>
  </div>
</template>

<script setup>
defineOptions({
  name: "JobManage",
});
import { ref, onMounted, computed } from "vue";
//引入图标组件
import { Plus, Edit, Delete, Menu, Setting } from "@element-plus/icons-vue";
import AddJob from "./AddJob/index.vue";
import BtnAndJob from "./BtnAndJob/index.vue";
import {
  assignMenuAPI,
  deleteAPI,
  getJobListAPI,
  getJobMenuAPI,
} from "@/api/job";
import { formatDate } from "@/utiles/time";
import { getMenuListAPI } from "@/api/menu";
import { ElMessage } from "element-plus";
//加载状态
let loading = ref(false);
let loading2 = ref(false);
let pageNo = ref(1);
let pageSize = ref(10);
let total = ref(0);
let jobList = ref([]);
let drawer = ref(false);
let drawer1 = ref(false);
//控制添加职位的弹窗
let addJobDialog = ref(false);
let jobId = ref("");
let menuJobid = ref("");
//是否全选
let isAll = ref(false);
//中间状态
let isIndeterminate = computed(() => {
  return (
    menuArr.value.length > 0 && menuArr.value.length < menuList.value.length
  );
});
//菜单列表
let menuList = ref([]);

let btnId = ref("");
//选中的菜单
let menuArr = ref([]);
onMounted(() => {
  getJobList();
  getMenuList();
});
//分页
const handleSizeChange = (val) => {
  getJobList();
};
const handleCurrentChange = (val) => {
  getJobList();
};
//获取职位列表
const getJobList = async () => {
  loading.value = true;
  let result = await getJobListAPI(pageNo.value, pageSize.value);
  if (result.code == 200) {
    jobList.value = result.data.list;
    total.value = result.data.total;
    loading.value = false;
  }
};
//获取菜单列表
const getMenuList = async () => {
  let result = await getMenuListAPI(1,99);
  if (result.code == 200) {
    menuList.value = result.data.list;
  }
};
//获取职位对应的菜单权限
const getJobMenu = async () => {
  let result = await getJobMenuAPI(menuJobid.value);

  menuArr.value = result.data.map((item) => item.MenuId._id);
  isAll.value = menuArr.value.length === menuList.value.length;
};
//显示添加对话框
const changeAddShow = () => {
  addJobDialog.value = true;
};
//修改职位
const updateJob = (id) => {
  jobId.value = id;
  addJobDialog.value = true;
};
//分配菜单
const changeMenu = (id) => {
  drawer.value = true;
  menuJobid.value = id;
  getJobMenu();
};
//全选
const handleCheckAllChange = (val) => {
  menuArr.value = val ? menuList.value.map((item) => item._id) : [];
};
//选中菜单
const handleCheckedCitiesChange = (value) => {
  let checkedCount = value.length;
  isAll.value = checkedCount === menuList.value.length;
};
//添加选中的菜单
const addSelectMenu = async () => {
  loading2.value = true;
  let result = await assignMenuAPI({
    jobId: menuJobid.value,
    menuArr: menuArr.value,
  });
  if (result.code == 200) {
    ElMessage.success("分配成功");
    drawer.value = false;
    loading2.value = false;
    getJobList();
  }
};
const changeBtn = (id) => {
  btnId.value = id;
  drawer1.value = true;
};
const deleteJob = async (id) => {
  let result = await deleteAPI(id);
  if (result.code == 200) {
    ElMessage.success("删除成功");
    getJobList();
  }
};
</script>

<style lang="scss" scoped>
.page {
  margin: 10px 0px;
  display: flex;
  justify-content: center;
}
</style>
